<template>
  <div id="app">
    <choose-user :chooseuser="chooseuser" v-if="$root.me == null"></choose-user>
    <user-list
      v-if="$root.me != null"
      v-show="!ischat"
      :islogin="islogin"
      :users="users"
      :chooseUser="chooseUser"
      :unreadlist="unreadlist"
    ></user-list>
    <chat-user
      v-if="ischat"
      :touser="touser"
      :closechat="closechat"
      :newMsg="newMsg"
    ></chat-user>
  </div>
</template>

<script>
import chooseUser from "./components/chooseuser";
import userList from "./components/userlist";
import axios from "axios";
import socket from "./socket";
import chatUser from "./components/chatuser";

export default {
  name: "App",
  components: {
    chooseUser,
    userList,
    chatUser,
  },
  data() {
    return {
      chooseuser: [],
      islogin: false,
      users: [],
      ischat: false,
      touser: null,
      unreadlist: [],
      newMsg: null,
    };
  },
  async beforeMount() {
    //获取接口数据
    let res = await axios.get("http://localhost:3000/api/userlist");
    this.chooseuser = res.data;
    console.log(res);
  },
  mounted() {
    //监听登录事件
    socket.on("login", (data) => {
      if (data.state == "ok") {
        this.islogin = true;
        console.log(data);
        socket.emit("users"); //接受数据
      }
    });
    //监听登出事件
    socket.on("logout", (data) => {
      this.islogin = false;
      console.log(data);
      socket.disconnect();
    });

    //断开连接
    socket.on("disconnect", () => {
      console.log("已断开连接");
    });

    //监听用户列表
    socket.on("users", (data) => {
      console.log(data);
      this.users = data;
    });

    //监听未读信息
    socket.on("unreadMsg", (data) => {
      data.forEach((item) => {
        item.from = this.userObj[item.from];
        item.to = this.userObj[item.to];
        this.unreadlist.push(item.from.username);

        //将数据保存到本地存储
        let keystr ="chat-user-" + this.$root.me.username + "-" + item.from.username;
        localStorage[keystr] = localStorage[keystr] ? localStorage[keystr] : '[]';
        let newArr = JSON.parse(localStorage[keystr]);
        newArr.push(item);
        localStorage[keystr] = JSON.stringify(newArr);
      });
    });

    //接受信息事件
    socket.on("accept", (msg) => {
      if (
      (this.ischat==true && msg.from.username==this.touser.username) || 
      (msg.to.username==this.touser.username && msg.to.isgroup == 'true')
      ) {
        this.newMsg = msg;
      }else{
        let keystr = 'chat-user-'+ this.$root.me.username + '-'+ msg.from.username
        localStorage[keystr] = localStorage[keystr] ? localStorage[keystr] : '[]'
        let newArr = JSON.parse(localStorage[keystr])
        newArr.push(msg)
        localStorage[keystr] = JSON.stringify(newArr)
        this.unreadlist.push(msg.from.username)
      }
    });
  },

  methods: {
    chooseUser: function (user) {
      console.log(user);
      this.ischat = true;
      this.touser = user;
      //删除未读红点
      let index = this.unreadlist.indexOf(user.username)
      this.unreadlist.splice(index,1)
    },
    closechat: function () {
      this.ischat = false;
    },
  },

  computed: {
    //将用户名作为key，item作为value
    userObj: function () {
      let obj = {};
      this.users.forEach((item) => {
        obj[item.username] = item;
      });
      return obj;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>
